<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
<!--    <link rel="stylesheet" href="css/elementui.css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body style="height: 100%; margin: 0">

<div id="app">
    <el-table :data="countData" border style="width: 90%">
        <el-table-column prop="browsepbno" label="浏览人数" width="200"></el-table-column>
        <el-table-column prop="orderpbno" label="下单人数" width="200"></el-table-column>
        <el-table-column prop="orderno" label="订单数" width="200"></el-table-column>
        <el-table-column prop="quantityno" label="下单数" width="200"></el-table-column>
        <el-table-column prop="validorderno" label="有效订单数" width="200"></el-table-column>
        <el-table-column prop="quantitymoney" label="下单金额" width="200"></el-table-column>
    </el-table>
    <el-table :data="countData" border style="width: 100%">
        <el-table-column prop="refundmoney" label="退款金额" width="200"></el-table-column>
        <el-table-column prop="paymentpbno" label="付款人数" width="200"></el-table-column>
        <el-table-column prop="paymentno" label="付款订单数" width="200"></el-table-column>
        <el-table-column prop="payno" label="付款件数" width="200"></el-table-column>
        <el-table-column prop="paymentmoney" label="付款金额" width="200"></el-table-column>
        <el-table-column prop="custmoney" label="客单价" width="200"></el-table-column>
    </el-table>
    <br/>
    <br/>
    <br/>
    下单转化率:{{successConversionRate}}%   <br/>
    付款转化率:{{payConversionRate}}%    <br/>
    成交转化率:{{successConversionRate}}%
</div>


<div id="container" style="width:600px;height: 400px"></div>

<div id="container2" style="width:90%;height: 400px"></div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/echarts.common.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>


<script>
    new Vue({
        el:"#app",
        data(){
            return{
                countData:[],
                successConversionRate:0,//订单转化率
                payConversionRate:0,//付款转化率
                successConversionRate:0,//成交转化率
               // rate:[]
            }
        },
        created(){
            this.fetchData();
        },
        methods:{
            fetchData(){
                axios.get(`/ordercounts/counts.do`).then(response=>{
                    this.countData=response.data;
                    //下单转化率= 下单人数/浏览人数
                    this.orderConversionRate=this.countData[0].orderpbno/this.countData[0].browsepbno*100;
                    //alert(this.orderConversionRate);
                    //付款转化率=付款人数/下单人数
                    this.payConversionRate=this.countData[0].paymentpbno/this.countData[0].orderpbno*100;
                    //alert(this.payConversionRate);
                    //成交转化率=付款人数/浏览人数
                    this.successConversionRate=this.countData[0].paymentpbno/this.countData[0].browsepbno*100;
                    //alert(this.successConversionRate);
                })
            }
        }
    });
</script>



<script type="text/javascript">



    let dom = document.getElementById("container");
    let myChart = echarts.init(dom);
    // var app = {};
    option = null;
    option = {
        title: {
            text: '漏斗图',
            subtext: ''
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['浏览','下单','付款']
        },
        calculable: true,
        series: [
            {
                name:'漏斗图',
                type:'funnel',
                left: '10%',
                top: 60,
                //x2: 80,
                bottom: 60,
                width: '80%',
                // height: {totalHeight} - y - y2,
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    {value: 80, name: '浏览'},
                    {value: 40, name: '下单'},
                    {value: 20, name: '付款'}
                    // {value: 93.3, name: '浏览'},
                    // {value: 3.95, name: '下单'},
                    // {value: 2.718, name: '付款'}

                ]
            }
        ]
    };
        myChart.setOption(option, true);

    var dom2 = document.getElementById("container2");
    var myChart2 = echarts.init(dom2);

    option2 = {
        title: {
            text: '双Y轴折线图',
            top:10,
            left:10
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}次"
        },
        toolbox: {
            show : true,
            top:10,
            right:10,
            feature : {
                mark : {show: true},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        grid:{
            top:60,
            right:70,
            bottom:30,
            left:60
        },
        legend: {
            top:32,
            left:'center',
            data:['付款金额','退款金额','付款人数','付款件数','下单转化率(%)','付款转化率(%)','成交转化率(%)']
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['2017-07-01','2017-07-05','2017-07-09','2017-07-13','2017-07-17','2017-07-21','2017-07-25','2017-07-29','2017-08-02']
            }
        ],
        yAxis : [
            {
                type: 'value',
                name:"\n\n\n\n\n\n︵\n\n︶",
                nameLocation:"center",
                nameGap:35,
                nameRotate:0,
                nameTextStyle:{
                    fontSize: 16,
                },
                //默认以千分位显示，不想用的可以在这加一段
                axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                    show:true,
                    showMinLabel:true,
                    showMaxLabel:true,
                    formatter: function (value) {
                        return value;
                    }
                }
            },
            {
                type: 'value',
                name:"转\n化\n率\n︵\n%\n︶",
                nameLocation:"center",
                nameGap:35,
                nameRotate:0,
                nameTextStyle:{
                    fontSize: 16,
                },
                //默认以千分位显示，不想用的可以在这加一段
                axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                    show:true,
                    showMinLabel:true,
                    showMaxLabel:true,
                    formatter: function (value) {
                        return value;
                    }
                }
            }
        ],
        series : [
            {
                name:'付款金额',
                type:'line',
                smooth: true,
                yAxisIndex: 0,
                data:[35,15,8,12,11,6,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            },
            {
                name:'退款金额',
                type:'line',
                smooth: true,
                yAxisIndex: 0,
                data:[35,15,8,12,11,6,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            },
            {
                name:'付款人数',
                type:'line',
                smooth: true,
                yAxisIndex: 0,
                data:[35,15,8,12,11,6,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            },
            {
                name:'付款件数',
                type:'line',
                smooth: true,
                yAxisIndex: 0,
                data:[35,15,8,12,11,6,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            },
            {
                name:'下单转化率(%)',
                type:'line',
                smooth: true,
                yAxisIndex: 1,
                data:[90,16,6,5,4,4,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            },
            {
                name:'付款转化率(%)',
                type:'line',
                smooth: true,
                yAxisIndex: 1,
                data:[90,16,6,5,4,4,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            },
            {
                name:'成交转化率(%)',
                type:'line',
                smooth: true,
                yAxisIndex: 1,
                data:[90,16,6,5,4,4,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            }
        ]
    };


    myChart2.setOption(option2, true);
    function getMousePos(event) {
        var e = event || window.event;
        return {'x':e.clientX,'y':clientY}
    }

</script>
</html>